<template>
 <div>
   <!-- :value="now" @input="val=>value=val" -->
<datePicker v-model="now"></datePicker>
<!-- <RunBall :color="`green`" :value="pos1" :target="target1" @input="input">绿球</RunBall> -->
<!-- v-model 等价于是 :value + input方法 -->
<!-- :xxx.sync="xxx"（如:value.sync） 等价于 :xxx如（:value）+ this.$meit('update:xxx')如（this.$meit("update:value")）-->
<RunBall :color="`green`" :value="pos1" :target="target1" @input="input">绿球</RunBall>
<RunBall :color="`green`"  :target="target1" v-model="pos1" ref="ball_1">绿球</RunBall>

<RunBall :color="`yellow`"  :target="target2" v-model="pos2" ref="ball_2">黄球</RunBall>
  <el-button type="primary" @click="getBallInfo()">获取当前球的坐标</el-button>

<!-- <RunBall></RunBall> -->



 </div>
</template>

<script>
 import datePicker from "@/views/Calendar/datePicker"
 import RunBall from "@/views/Calendar/RunBall.vue"
 export default {
   data () {
     return {
         now: new Date(),
         pos1:200,
         pos2:10,
         target1:777,
         target2:1000
     }
   },
   created () {

   },
   methods:{
     getBallInfo(){
       
       this.$refs.ball_2.stop();
       this.$alert(`第一个球的距离${this.pos1},第二个球的距离${this.pos2}`)
     },
     input(val){
      //  console.log(val)
       this.pos1 = val;
     }
   },
   computed: {

   },
   components: {
       datePicker,
       RunBall
   }
 }
</script>


